import React, { Component } from 'react';
import ReactDropDown, { ReactDropDownFull } from './dropdown';
import { containList } from '../static/index';

class Selector extends ReactDropDownFull {
    render() {
        let { value, callback, list } = this.props;
        const { isOpen } = this.state;
        return <div className="dropdown" ref="parent" style={{ display: 'inline-block', marginRight: 10 }}>
            <a href="javascript:void(0)" className="btn btn-default dropdown-toggle" onClick={() => this.trigger()}>{list[value].name} <span className="caret"></span></a>
            {isOpen ? <div className="tags-input-list-wrapper" onClick={() => this.close()}><ReactDropDown target={this.refs.parent} selected={value} data={list} callback={callback} /></div> : null}
        </div>
    }
}

export default class AttributeDropdown extends Component {
    handle(val, index) {
        let { attributeList, callback } = this.props;
        var newArr = [].concat(attributeList);
        newArr[index].index = val;
        newArr[index].secondIndex = 0;
        newArr[index].secondIndex = 0;
        callback(newArr);
    }
    secondHandle(val, index) {
        let { attributeList, callback } = this.props;
        var newArr = [].concat(attributeList);
        newArr[index].secondIndex = val;
        newArr[index].thirdIndex = 0;
        callback(newArr);
    }
    thirdHandle(val, index) {
        let { attributeList, callback } = this.props;
        var newArr = [].concat(attributeList);
        newArr[index].thirdIndex = val;
        callback(newArr);
    }
    changeAlsoStatus(index, val) {
        let { attributeList, callback } = this.props;
        var newArr = [].concat(attributeList);
        newArr[index].alsoStatus = val;
        callback(newArr);

    }

    render() {
        let { attributeList, deleteAttribute, option, addProfile } = this.props;
        let profileList = option.profileList,
            userAttribute = option.userAttribute;

        return (
            <div>
                {
                    attributeList.length > 0 ?
                        <div>
                            {
                                attributeList.map((item, index) => {
                                    return <div key={index} className="user-attr">
                                        {
                                            attributeList.length > 1 && index > 0 ?
                                                <div className="btn-group">
                                                    <button onClick={() => this.changeAlsoStatus(index, 'and')} type="button" className={'btn btn-default btn-sm' + (item.alsoStatus == 'and' ? ' active' : '')}>和</button>
                                                    <button onClick={() => this.changeAlsoStatus(index, 'or')} type="button" className={'btn btn-default btn-sm' + (item.alsoStatus == 'or' ? ' active' : '')}>或</button>
                                                </div>
                                                : ''
                                        }
                                        <Selector value={item.index} callback={(val) => this.handle(val, index)} list={profileList} />
                                        <Selector value={item.secondIndex} callback={(val) => this.secondHandle(val, index)} list={containList} />
                                        <Selector value={item.thirdIndex} callback={(val) => this.thirdHandle(val, index)} list={userAttribute[item.index]} />


                                        <i className="fa fa-minus-circle fa-2x" onClick={() => { deleteAttribute(index) }}></i>

                                    </div>
                                })
                            }

                        </div>
                        : ''
                }
                < span className="add-profile-btn" onClick={() => { addProfile(true); }}>添加属性条件 <i className="fa fa-plus-circle fa-2x"></i></span>
            </div >
        );
    }
}